<template>
  <h4>表单输入事件</h4>
  <h5>事件顺序：获取焦点、输入、改变、失去焦点</h5>
  <ul>
    <li>表单事件</li>
    <h4><input type="text" v-model="inputValue" @focus="handleFocus" @blur="handleBlur" @change="handleChange"
        @input="handleInput" />&nbsp;&nbsp;
      <span ref="eventName">等待事件...</span>
    </h4>
  </ul>
</template>

<script lang="ts" type="text/ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
const eventName = ref<HTMLElement | null>(null)

const handleFocus = (event: any) => {
  if (eventName.value) {
    eventName.value.innerText = '获得焦点...';
  }
  console.log(Date.now(), '获得焦点', event.target.value);
}
const handleInput = (event: any) => {
  if (eventName.value) {
    eventName.value.innerText += '输入ing...';
  }
  console.log(Date.now(), '输入', event.target.value)
}
const handleChange = (event: any) => {
  if (eventName.value) {
    eventName.value.innerText += '内容改变...';
  }
  console.log(Date.now(), '内容改变', event.target.value)
}
const handleBlur = (event: any) => {
  if (eventName.value) {
    eventName.value.innerText += '失去焦点...';
  }
  console.log(Date.now(), '失去焦点', event.target.value)
}
</script>

<style lang="scss" scoped></style>
